<template lang="">
  <div>
    <el-container class="container">
      <el-header>
        <h2 class="title">北广零件质量信息看板(原型页面)</h2>
      </el-header>
      <el-main>
        <el-row :gutter="10" class="row" style="color: blue">
          <el-col :span="7" class="left-col">
            <div
              :class="[
                'seller',
                fullScreenStatus['seller'] ? 'fullScreen' : '',
              ]"
            >
              <i
                @click="changeSize('seller')"
                :class="[
                  fullScreenStatus['seller'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>

              <Seller ref="seller"></Seller>
            </div>

            <div
              :class="[
                'trender',
                fullScreenStatus['trend'] ? 'fullScreen' : '',
              ]"
            >
              <i
                @click="changeSize('trend')"
                :class="[
                  fullScreenStatus['trend'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>
              <Trender ref="trend"></Trender>
            </div>
          </el-col>
          <el-col :span="10" class="middle-col">
            <div :class="['map', fullScreenStatus['map'] ? 'fullScreen' : '']">
              <i
                @click="changeSize('map')"
                :class="[
                  fullScreenStatus['map'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>
              <Map ref="map"></Map>
            </div>

            <div
              :class="['rank', fullScreenStatus['rank'] ? 'fullScreen' : '']"
            >
              <i
                @click="changeSize('rank')"
                :class="[
                  fullScreenStatus['rank'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>
              <Rank ref="rank"></Rank>
            </div>
          </el-col>
          <el-col :span="7" class="right-col">
            <div
              :class="['stock', fullScreenStatus['stock'] ? 'fullScreen' : '']"
            >
              <i
                @click="changeSize('stock')"
                :class="[
                  fullScreenStatus['stock'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>
              <Stock ref="stock"></Stock>
            </div>

            <div :class="['hot', fullScreenStatus['hot'] ? 'fullScreen' : '']">
              <i
                @click="changeSize('hot')"
                :class="[
                  fullScreenStatus['hot'] ? 'el-icon-close' : 'el-icon-rank',
                  'icon-rank-pos',
                ]"
              ></i>
              <Hot ref="hot"></Hot>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>
<script>
import Seller from "@/components/Seller";
import Trender from "@/components/Trender";
import Rank from "@/components/Rank";
import Hot from "@/components/Hot";
import Stock from "@/components/Stock";
// import Map from "@/components/Map";
import Map from "@/components/Darunfa";
export default {
  name: "ScreenPage",
  data() {
    return {
      // 定义每一个图表的全屏状态数据
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
    };
  },
  components: {
    Seller,
    Trender,
    Map,
    Rank,
    Hot,
    Stock,
  },

  created() {
    this.$socket.registerCallBack("fullScreen", this.recvData);
  },

  destroyed() {
    this.$socket.unregisterCallBack("fullScreen");
  },
  methods: {
    recvData(data) {
      // 取出哪一个图表需要切换
      const chartName = data.chartName;
      //取出,切换成什么状态
      const targetValue = data.value;

      this.fullScreenStatus[chartName] = targetValue;

      this.$nextTick(() => [this.$refs[chartName].screenAdapter()]);
    },
    changeSize(chartName) {
      // 改变全屏状态
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      // 必须用nextTick包裹,否则数据未改变完,就更新,出不了效果.
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      });

      // 发送websocket同步切换屏幕的命令
      // const targetValue = !this.fullScreenStatus[chartName];
      // this.$socket.send({
      //   action: "fullScreen",
      //   socketType: "fullScreen",
      //   chartName: chartName,
      //   value: targetValue,
      // });
    },
  },
};
</script>
<style lang="less" scoped>
/* 全屏样式的定义 */
/* TODO: position !important */
.fullScreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}
.container {
  /* height: 960px; */
  /* width: 1368px; */
  position: absolute;
  width: 100%;
  height: 100%;

  .title {
    text-align: center;
  }

  .row {
    height: 100%;

    .left-col {
      height: 100%;
      .trender {
        position: relative;
        height: 50%;
        margin: 1%;
      }
      .seller {
        position: relative;
        height: 50%;
        margin: 1%;
      }
    }

    .middle-col {
      height: 100%;
      .map {
        position: relative;
        height: 60%;
        margin: 1%;
      }
      .rank {
        position: relative;
        height: 40%;
        margin: 1%;
      }
    }

    .right-col {
      height: 100%;

      .hot {
        position: relative;
        height: 50%;
        margin: 1%;
      }

      .stock {
        position: relative;
        height: 50%;
        margin: 1%;
      }
    }
  }
}

.icon-rank-pos {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  color: rgb(21, 165, 146);
  font-size: 2rem;
}
</style>
